@charset "utf-8";
@import "common/reset";
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background: url(../img/headerbj.png) repeat;
    background-size: 100%;
}
.web{
    #inb{
        display: none;
    }
        
    #inb1{
        display: none;
    }    
    #inb2{
        display: none;
    }
     #inb:checked~.big{
        display: none;
    }
        #inb1:checked~.big1{
        display: none;
    }
        #inb2:checked~.big2{
        display: none;
    }
    .b{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 91px;
        background: white;
        border-bottom: 1px solid #d9d9d9;
        #int{
            display: none;
        }
                #int1{
            display: none;
        }
                #int2{
            display: none;
        }
        #int:checked~ label .quan::after{
            display: block;
        }
        #int1:checked~ label .quan::after{
            display: block;
        }        
        #int2:checked~ label .quan::after{
            display: block;
        }
        label{
            align-self: center;
            height: 23px;
        }
        .quan{
            width: 23px;
            height: 23px;
            border: 1px solid #f85c5c;
            border-radius: 50%;
            &::after{
                display:none;
                content: "";
                width: 22px;
                height: 22px;
                text-align: center;
                background: url(../img/yes.png);
                background-size: 100%;
                transform: translate(-0.8px,-0.5px);
            }
        }
        .img{
            width: 60px;
            height: 62.5px;
            align-self: center;
            img{
                width: 100%;
            }
        }
        .zi{
            height: 100%;
            align-content:space-around;
            h3{
                height: 30%;
                line-height:35px;
                font-size: 12px;
                color: #5c5c5c;
            }
            h4{
                height: 30%;
                line-height:30px;
                font-size: 12px;
                color: #ef9797;
                margin-left: 5px;
            }
            p{
                height: 30%;
                line-height:25px;
                margin-left: 38px;
                input{
                    width: 41px;
                    height: 19px;
                    padding-left: 3px;
                }
            }
        }
        .wei{
            height:36px;
            align-self: center;
            .tu{
                width: 23px;
                height: 23px;
                img{
                    width: 100%;
                }
            }
            p{
                font-size: 10px;
                color: #eb7575;
                margin-top: 2px;
            }
        }
    }
    #in{
        display: none;
    }
    #in:checked~.b label .quan::after{
        display: block;
    }
    #in:checked~.foot .quan1::after{
        display: block;
    }
    .foot{   
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        width:100%;
        height: 61px; 
        background:#ffffff;
        border-top: 1px solid #cdcbce;
        label{
            height: 23px;
            align-self: center;
        }
         .quan1{
                width: 23px;
                height: 23px;
                border: 1px solid #f85c5c;
                border-radius: 50%;
                &::after{
                    display:none;
                    content: "";
                    width: 23px;
                    height: 23px;
                    text-align: center;
                    background: url(../img/yes.png);
                    background-size: 100%;
                }
            }
            .er{
                align-self: center;
                font-size: 14px;
                color:#5c5c5c;
            }
            .zho{
                height: 61px;
                text-align: center;
                .p1{
                   font-size: 11px;
                   color: #6b6b6b;
                   margin-top:8px; 
                   span{
                       font-size: 15px;
                       color: #e73838;
                       margin-left: 8px;
                   }
                }
                .p2{
                    margin-top: 8px;
                    font-size: 10px;
                    color: #6b6b6b;
                }
            }
            .fot{
                align-self: center;
                width: 81px;
                height: 36px;
                line-height: 36px;
                background: #f85c5c;
                text-align: center;
                border-radius: 10px;
                a{
                    font-size: 13px;
                color: white;
                }
            }
    }
}